<template>
  <div class="app-container">
    <div style="width: 100%;margin-bottom:10px;justify-content: flex-end" class="flex-row">
      <el-button type="primary" @click="addModule('',false)">新增链接</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        :index="indexMethod"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column prop="dblinkName" label="链接名称" align="center"></el-table-column>
      <el-table-column prop="dblinkType" label="链接类型" align="center"></el-table-column>
      <el-table-column prop="handle" label="操作设置" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="addModule(scope.row,false)">编辑</el-button>
          <el-button type="text" @click="deleteScope(scope.row)">删除</el-button>
          <el-button type="text" @click="connectDatabase(scope.row)">连接数据库</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;margin-top:10px;justify-content: center" class="flex-row">
      <el-pagination
        background
        layout="sizes,prev,pager,next,jumper,total"
        :page-size="pagin.pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :total="pagin.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <transition name="fade-transform" mode="out-in">
      <div style="width: 100%;height: 100%;overflow: hidden;transition:0.5s" v-if="showInput">
        <el-form :model="formType" :rules="formRules" ref="refForm" label-width="120px" label-position="right">
          <tip-title title="链接信息"></tip-title>
          <el-row>
            <el-col :span="12">
              <el-form-item label="类型" style="width: 100%" prop="flowDblink.dblinkType">
                <el-select placeholder="请选择数据源类型" clearable filterable style="width: 100%"
                v-model="formType.flowDblink.dblinkType">
                  <el-option label="MySQL" value="MySQL"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称" style="width: 100%" prop="flowDblink.dblinkName">
                <el-input placeholder="请输入数据源名称" clearable v-model="formType.flowDblink.dblinkName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="描述" style="width: 100%" prop="flowDblink.dblinkDescription">
                <el-input placeholder="请输入数据源描述" clearable
                          type="textarea" autosize v-model="formType.flowDblink.dblinkDescription"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务器地址" style="width: 100%" prop="flowDblink.configuration.host">
                <el-input placeholder="请输入服务器地址" clearable
                          type="textarea" autosize v-model="formType.flowDblink.configuration.host"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务器端口" style="width: 100%" prop="flowDblink.configuration.port">
                <el-input placeholder="请输入服务器端口" clearable v-model="formType.flowDblink.configuration.port"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据库名" style="width: 100%" prop="flowDblink.configuration.database">
                <el-input placeholder="请输入数据库名称" clearable v-model="formType.flowDblink.configuration.database"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名" style="width: 100%" prop="flowDblink.configuration.username">
                <el-input placeholder="请输入用户名" clearable v-model="formType.flowDblink.configuration.username"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" style="width: 100%" prop="flowDblink.configuration.password">
                <el-input placeholder="请输入密码" clearable v-model="formType.flowDblink.configuration.password"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="JDBC额外参数" style="width: 100%" prop="flowDblink.configuration.jdbcString">
                <el-input placeholder="请输入JDBC额外参数" clearable
                          type="textarea" autosize v-model="formType.flowDblink.configuration.jdbcString"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <tip-title title="高级设置"></tip-title>
          <el-row>
            <el-col :span="24">
              <el-form-item label="初始连接数" style="width: 100%" prop="flowDblink.configuration.initialPoolSize">
                <el-input-number
                  class="input-item"
                  style="width: 100%"
                  :controls="false"
                  :clearable="true"
                  placeholder="请输入初始连接数"
                  v-model="formType.flowDblink.configuration.initialPoolSize"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="最小连接数" style="width: 100%" prop="flowDblink.configuration.minPoolSize">
                <el-input-number
                  class="input-item"
                  style="width: 100%"
                  :controls="false"
                  v-model="formType.flowDblink.configuration.minPoolSize"
                  :clearable="true"
                  placeholder="请输入最小连接数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="最大连接数" style="width: 100%" prop="flowDblink.configuration.maxPoolSize">
                <el-input-number
                  class="input-item"
                  style="width: 100%"
                  :controls="false"
                  v-model="formType.flowDblink.configuration.maxPoolSize"
                  :clearable="true"
                  placeholder="请输入最大连接数"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="height: 42px"></div>
        <div style="position: fixed;width: 100%;height:42px;background: #fff;z-index: 100;bottom: 0;">
          <div style="width: 100%;display: flex;justify-content: center;align-items: center;
position: relative;left: -6%;">
            <el-button type="primary" @click="saveForm" v-if="!disabledVal">保存</el-button>
            <el-button @click="showInput = false" v-if="!disabledVal">取消</el-button>
          </div>
        </div>
      </div>
    </transition>


  </div>
</template>

<script>
import {addData,getList,editData,delData,connectDatabaseData} from '@/api/database/index'
let defaultDBLink = {
  configuration: { sid: true, initialPoolSize: 5, minPoolSize: 5, maxPoolSize: 50 },
  isDatasourceInit: false,
}
export default {
  name: "index",
  created() {
    this.pagin.currentPage = 1
    this.getTableList()
  },
  data(){
    return {
      tableData:[],
      pagin:{
        currentPage:1,
        pageSize:10,
        total:0
      },
      disabledVal:false,
      showInput:false,
      formType:{
        id:'',
        flowDblink: defaultDBLink
      },
      formRules:{
        'flowDblink.dblinkName': [{ required: true, message: '请输入名称', trigger: 'blur' }],
        'flowDblink.configuration.host': [
          { required: true, message: '请输入服务器地址', trigger: 'blur' },
        ],
        'flowDblink.configuration.database': [
          { required: true, message: '请输入数据库名称', trigger: 'blur' },
        ],
        'flowDblink.configuration.username': [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        'flowDblink.configuration.password': [{ required: true, message: '请输入密码', trigger: 'blur' }],
        'flowDblink.configuration.port': [{ required: true, message: '请输入端口号', trigger: 'blur' }],
        'flowDblink.configuration.initialPoolSize': [
          { required: true, message: '请输入初始连接数', trigger: 'blur' },
        ],
        'flowDblink.configuration.minPoolSize': [
          { required: true, message: '请输入最小连接数', trigger: 'blur' },
        ],
        'flowDblink.configuration.maxPoolSize': [
          { required: true, message: '请输入最大连接数', trigger: 'blur' },
        ],
        'flowDblink.dblinkType': [{ required: true, message: '请输入类型', trigger: 'blur' }],
        'flowDblink.configuration.serviceId': [
          { required: true, message: '请输入服务名 / SID', trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    indexMethod(index){
      return (this.pagin.currentPage - 1) * this.pagin.pageSize + index + 1
    },
    handleSizeChange(val){
      this.pagin.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val){
      this.pagin.currentPage = val
      this.getTableList()
    },

    addModule(item,bol){
      this.showInput = true
      if(item && bol){
        this.disabledVal = true
      }
      else if(item){
        this.disabledVal = false
        this.formType = {
          id:item.id,
          flowDblink:{
            ...item
          }
        }
        this.formType.flowDblink.configuration = JSON.parse(item.configuration)
      }
      else{
        this.disabledVal = false
        defaultDBLink = {
          configuration: { sid: true, initialPoolSize: 5, minPoolSize: 5, maxPoolSize: 50 },
          isDatasourceInit: false,
        }
        this.$set(this.formType,'id','')
        this.$set(this.formType,'flowDblink',defaultDBLink)
      }
    },

    getTableList(){
      const params = {
        current:this.pagin.currentPage,
        size:this.pagin.pageSize
      }
      getList(params).then(res => {
        if(res.code == 200){
          this.tableData = res.data.records
          this.pagin.total = res.data.total * 1
          console.log(this.tableData,'this.tableData')
        }
        else{
          this.tableData = []
          this.pagin.total = 0
        }
      })
    },
    saveForm(){
      this.$refs.refForm.validate(bol => {
        if (!bol) return;
        const data = {
          id: this.formType.id,
          dblinkName: this.formType.flowDblink.dblinkName,
          dblinkDescription: this.formType.flowDblink.dblinkDescription,
          dblinkType: this.formType.flowDblink.dblinkType,
          configuration: JSON.stringify(this.formType.flowDblink.configuration),
        }
        if(this.formType.id){
          editData(data).then(res => {
            if(res.code == 200){
              this.$message.success('编辑成功')
              this.showInput = false
              this.getTableList()
            }
          })
        }
        else{
          addData(data).then(res => {
            if(res.code == 200){
              this.$message.success('保存成功')
              this.showInput = false
              this.pagin.currentPage = 1
              this.getTableList()
            }
          })
        }
      })
    },
    deleteScope(scope){
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delData(scope.id).then(res => {
          if(res.code == 200){
            this.$message.success('删除成功')
            this.getTableList()
          }
          else{
            this.$message.error(res.msg || '删除失败')
          }
        })
      })
    },
    connectDatabase(scope){
      connectDatabaseData(scope.id).then(res => {
        if(res.code == 200){
          this.$message.success('连接成功')
          this.getTableList()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
